<template>
	<t-layout-page>
		<t-layout-page-item>
			<t-table
				title="菜单管理列表"
				:table="table"
				:columns="table.columns"
				row-key="menuId"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				@selection-change="selectionChange"
				:isShowPagination="false"
				isShowTreeStyle
			/>
		</t-layout-page-item>
	</t-layout-page>
</template>

<script>
import TreeData from './treeData.json'
export default {
	data() {
		return {
			table: {
				firstColumn: { type: 'selection' },
				data: [],
				columns: [
					{ prop: 'menuName', label: '菜单名称', minWidth: 180, align: 'left' },
					{
						prop: 'menuType',
						label: '菜单类型',
						minWidth: 100,
						align: 'left',
						render: text => {
							let txt = ''
							switch (text) {
								case 'M':
									txt = '目录'
									break
								case 'C':
									txt = '菜单'
									break
								case 'F':
									txt = '按钮'
									break
								default:
									txt = '未知'
									break
							}
							return <span>{txt}</span>
						}
					},
					{ prop: 'perms', label: '权限标识', minWidth: 100, align: 'left' },
					{ prop: 'createBy', label: '创建人', minWidth: 100, align: 'left' },
					{ prop: 'createTime', label: '创建时间', minWidth: 180, align: 'left' },
					{ prop: 'remark', label: '备注', minWidth: 180, align: 'left' }
				],
				// 表格内操作列
				operator: [
					{
						text: '新增',
						fun: this.handleAdd
					},
					{
						text: '编辑',
						fun: this.edit
					},
					{
						text: '删除',
						fun: this.handleDelete
					}
				],
				// 操作列样式
				operatorConfig: {
					align: 'left',
					width: '160',
					label: '操作'
				}
			},
			ids: []
		}
	},
	created() {
		this.getList()
	},
	methods: {
		handleAdd(row) {
			console.log('新增', row)
		},
		edit(row) {
			console.log('编辑', row)
		},
		handleDelete(row) {
			console.log('删除', row)
		},
		// 复选框选中
		selectionChange(data) {
			console.log('复选框选中', data)
			this.ids = data.map(item => item.menuId)
			// console.log(77, this.ids)
		},
		getList() {
			const res = TreeData
			if (res.success) {
				this.sourceMenuData = res.data
				this.table.data = this.handleTree(res.data, 'menuId')
				// console.log(777, this.table.data)
			}
		},
		/**
		 * 构造树型结构数据
		 * @param {*} data 数据源
		 * @param {*} id id字段 默认 'id'
		 * @param {*} parentId 父节点字段 默认 'parentId'
		 * @param {*} children 孩子节点字段 默认 'children'
		 * @param {*} rootId 根Id 默认 0
		 */
		handleTree(data, id, parentId, children, rootId) {
			id = id || 'id'
			parentId = parentId || 'parentId'
			children = children || 'children'
			rootId = rootId || 0
			//对源数据深度克隆
			const cloneData = JSON.parse(JSON.stringify(data))
			//循环所有项
			const treeData = cloneData.filter(father => {
				let branchArr = cloneData.filter(child => {
					//返回每一项的子级数组
					return father[id] === child[parentId]
				})
				branchArr.length > 0 ? (father.children = branchArr) : ''
				//返回第一层
				return father[parentId] === rootId
			})
			return treeData != '' ? treeData : data
		}
	}
}
</script>
